import presetIcons from '@unocss/preset-icons'
import presetWind3 from '@unocss/preset-wind3'
import transformerDirectives from '@unocss/transformer-directives'
import transformerVariantGroup from '@unocss/transformer-variant-group'
import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
  presets: [
    presetWind3({ dark: 'class', attributify: false }),
    presetIcons({
      prefix: '',
      mode: 'auto',
      extraProperties: {
        display: 'block',
      },
      collections: {
        // 自定义图标：使用方法 <i class="fetm:circle"></i>
        fetm: {
          circle: `<svg fill="#fff" viewBox="0 0 120 120"><circle cx="60" cy="60" r="50"></circle></svg>`,
        },
      },
      customizations: {
        transform(svg, collection, icon) {
          // 对图标应用修改
          // if (collection === 'fetm' && icon === 'circle') {
          //   return svg.replace(/#fff/, '#ff0000')
          // }
          return svg
        },
      },
    }),
  ],
  transformers: [transformerVariantGroup(), transformerDirectives()],
  rules: [['flex-1', { 'flex': '1 1 0%', 'min-width': '0', 'min-height': '0' }]],
  theme: {
    colors: {
      primary: 'var(--el-color-primary)',
      warning: 'var(--el-color-warning)',
      danger: 'var(--el-color-danger)',
      success: 'var(--el-color-success)',
      highlight: 'var(--fetm-color-highlight)',
    },
  },
  // 始终包含的样式
  safelist: [
    // DEMO
    ...Array.from({ length: 5 }, (_, i) => `p-${i + 1}px`),
  ],
  // 禁止包含的样式
  blocklist: ['el-link', /^el-*/, /^fa-*/],
})
